<template>
  <div class="wrap">
    <div class="title">[ 运营名称 ] 的操作记录</div>
    <div class="header">
      <div class="left">
        <el-date-picker
          v-model="queryParams.times"
          type="daterange"
          size="small"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="changeOptions"
        >
        </el-date-picker>
      </div>
      <div class="right">
        <el-select
          v-model="queryParams.op"
          placeholder="请选择"
          size="small"
          class="header-select"
          @change="changeOptions"
        >
          <el-option label="全部操作" value=""></el-option>
          <el-option label="确认入库" :value="1"></el-option>
          <el-option label="代贴面单" :value="2"></el-option>
        </el-select>
        <el-select
          v-model="queryParams.shop"
          placeholder="全部店铺"
          size="small"
          class="header-select"
          @change="changeOptions"
        >
          <el-option label="全部店铺" value=""></el-option>
          <el-option label="店铺1" :value="1"></el-option>
          <el-option label="店铺2" :value="2"></el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="data"
        border
      >
        <el-table-column
          label="时间"
          prop="createTime"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          prop="typeStr"
          align="center"
        ></el-table-column>
        <el-table-column
          label="店铺（用户）"
          prop=""
          align="center"
        ></el-table-column>
      </el-table>
      <div class="page-wrap">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="count"
          @current-change="getData"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "adminOplog",
  data(){
    return {
      queryParams:{
        page: 1,
        pageSize: 20,
        times: [],
        op: '',
        shop: '',
      },
      data:[],
      count:0,
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      this.data = [
        {
          id: 1,
          createTime: '2023-03-23 14:30:17',
          type: 1,
          typeStr: '确认入库',
          shop: '',
        }
      ];
    },
    changeOptions(){
      this.queryParams.page = 1;
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .title{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .header{
    display: flex;
    justify-content: space-between;
    .header-select{
      margin-right: 20px;
    }
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
